<!-- Modal.vue -->
<template>
    <div v-if="isVisible" class="modal-fixed">
        <!-- 弹窗内容 -->
        <button @click="closeModal" class="close-button">关闭</button>
        <img :src="qrCodeSrc" alt="二维码" />
        <p>免费热线(微信同号):199-5126-7536</p>
    </div>
</template>

<script setup>
import { defineProps, toRefs ,defineEmits,onMounted} from 'vue';
import img1 from "@/img/10060.png"


const props = defineProps({
    isVisible: Boolean,
    qrCodeSrc: {
        type:String,
        default:img1
    }
});

const { isVisible } = toRefs(props);

// 定义可以发出的事件
const emit = defineEmits(['update:isVisible']);

// 自动打开弹窗
onMounted(()=>{
    setTimeout(()=>{
        emit('update:isVisible', true);
    },3000)
})

const closeModal = () => {
    // 通过事件向父组件发出关闭弹窗的信号
    emit('update:isVisible', false);
};
</script>

<style scoped>
/* 添加固定定位弹窗的样式 */
.modal-fixed {
    /* 固定定位 */
    position: fixed;
     /* 距离右边20px */
    right: 15px;
     /* 距离底部20px */
    bottom: 5px;
    /* 弹窗宽度 */
    width: 350px; 
    /* 弹窗高度 */
    height: 300px;
   /* 白色背景 */
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
     /* 阴影效果 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    /* 确保弹窗在最上层 */
    z-index: 1000;
   
}
/* 关闭按钮的样式 */
.close-button {
    position: absolute; /* 绝对定位 */
    top: 10px; /* 距离顶部10px */
    right: 10px; /* 距离右侧10px */
    z-index: 10; /* 确保按钮在其他内容之上 */
}
</style>